<template>
  <div>
    <a-locale-provider :locale="localItem">
      <a-layout>
        <a-layout-header>
          <orhon-header :value="list" />
        </a-layout-header>
        <a-layout>
          <a-layout-sider>
            <orhon-menu-silder />
          </a-layout-sider>
          <div>
            <orhon-tabs />
            <a-layout-content class="content">
              <nuxt />
            </a-layout-content>
          </div>
        </a-layout>
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>
    </a-locale-provider>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import { Getter, State, namespace } from "vuex-class";
import OrhonHeader from "../components/HomePage/Header.vue";
import OrhonTabs from "../components/Menu/Tabs.vue";
import Static from "../models/StaticData/Layout";
import { Header } from "../models/HomePage";
import OrhonMenuSilder from "~/components/Menu/Silder.vue";
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import en_GB from "ant-design-vue/lib/locale-provider/en_GB";

const someModule = namespace("i18n");
@Component({
  name: "Menu",
  components: {
    OrhonHeader,
    OrhonMenuSilder,
    OrhonTabs
  },
  middleware: ["authenticated"]
})
export default class Default extends Vue {
  @someModule.Getter("get") getGetters;
  @someModule.Mutation("add") setAdd;
  list: Header[] = Static.List;
  localItem: any = zhCN;
  Formatter(value: Object): Object {
    let local = this.getGetters.value;
    switch (local) {
      case "zhCN":
        local = zhCN;
        break;
      case "en_GB":
        local = en_GB;
        break;
    }
    return local;
  }

  // get localItem(): Object {
  //   const local = this.Formatter(this.getGetters.value);
  //   return local;
  // }
}
</script>
<style lang="less" scoped>
@color: white;
@background: #f8f8f8;
.ant-layout-header {
  background: @color;
  // border: 1px solid red;
}

.ant-layout-sider {
  // border: 1px solid red;
  background-color: white;
  max-height: calc(100vh - 133px);
  overflow: auto;
}

// ::-webkit-scrollbar {
//   /*滚动条整体样式*/
//   width: 8px; /*宽分别对应竖滚动条的尺寸*/
//   height: 5px; /*高分别对应横滚动条的尺寸*/
// }

// ::-webkit-scrollbar-track {
//   /*滚动条里面轨道*/
//   background-color: #e2ebee;
// }

// ::-webkit-scrollbar-thumb {
//   /*滚动条里面小方块*/
//   background-color: #65b1f8;
// }

.ant-layout-footer {
  // border: 1px solid red;
}

.ant-layout {
  // border: 1px solid red;
  // min-height: calc(100vh);
}

.ant-layout-content {
  margin-left: 20px;
  padding: 20px;
  width: calc(100vw - 260px);
  background-color: white;
}
.content {
  height: calc(100vh - 190px);
  overflow: auto;
  position: relative;
}
</style>
